<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <!-- 基础信息 -->
  <meta charset="utf-8">
  <!-- (允许跨域)设置了跨域资源共享（CORS）的策略，允许所有来源的访问。任何网站上的 JavaScript 脚本都可以从该网站获取数据，而不会受到同源策略的限制。 -->
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <!-- 强制 HTTPS，若不需要可删除，但可能出现问题 -->
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <!-- 定义了页面渲染方式为 WebKit 内核。 -->
  <meta name="renderer" content="webkit" />
  <!-- 指定了页面在 IE 浏览器中采用最新的渲染模式，并在 Chrome 中使用 Chrome 内核。 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <!-- 强制使用 WebKit 渲染 -->
  <meta name="force-rendering" content="webkit" />
  <!-- 为移动设备优化的 viewport 设置，确保页面在各种设备上显示合适。 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 设置移动设备浏览器或桌面浏览器的主题色为灰色。 -->
  <meta name="theme-color" content="#424242" />
  <!-- 描述，关键字，作者  用于给搜索引擎爬取，不负责渲染页面-->
  <meta name="description" content="dancehole's blog">
  <meta name="keywords" content="dancehole个人主页">
  <meta name="author" content="dancehole">
  <title>dancehole's blog</title>
  <!-- jQuery -->
  <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.5.1/jquery.min.js"></script>
  <!-- HarmonyOS Sans 字体-->
  <!-- https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css -->
  <link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
  <!-- 引入样式 -->
  <link rel="stylesheet" type="text/css"
    href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/css/bootstrap.min.css">
  <!-- 自定义的css文件 整体样式/移动端/加载动画/网站动画-->
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <link rel="stylesheet" type="text/css" href="./css/mobile.css">
  <link rel="stylesheet" type="text/css" href="./css/loading.css">
  <link rel="stylesheet" type="text/css" href="./css/animation.css">
  <!-- 网站图标 -->
  <link rel="icon" href="./img/icon/dancehole.png">
  <!-- <link rel="apple-touch-icon" href="https://aurora-cdn.wuhobin.top/blog/favicon.png"> -->
  <!-- Izitoast /消息通知 功能-->
  <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/css/iziToast.min.css">
  <script type="text/javascript"
    src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/js/iziToast.min.js">
    </script>
  <!-- FontAwesome css/方便使用矢量图标-->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.2/css/all.min.css">
  <!-- Aplayer 音视频库-->
  <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.css"
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.js" crossorigin="anonymous"
    referrerpolicy="no-referrer"></script>

  <!-- 引入 Google Analytics 的跟踪代码。 -->
  <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-2WVH35V11W"></script> -->


  <!-- IE Out -->
  <script>
    // 版本检测
    if ( /*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href =
      "/upgrade-your-browser/index.html?referrer=" + encodeURIComponent(window.location.href);

    //Google Analytics 网站追踪 非自己网站可以注释或删除
    // window.dataLayer = window.dataLayer || [];
    // function gtag(){dataLayer.push(arguments);}
    // gtag('js', new Date());
    // gtag('config', 'G-2WVH35V11W');
  </script>
  <!-- PWA (渐进式 Web 应用）的配置-->
  <link rel="manifest" href="/manifest.json">
  <!-- 51.LA 统计 网站访问分析-->
  <!-- <script src="./js/51LA.js"></script> -->
</head>

<body>
  <!--加载动画-->
  <div id="loading-box">
    <div class="loading-left-bg"></div>
    <div class="loading-right-bg"></div>
    <div class="spinner-box">
      <div class="loader">
        <div class="inner one"></div>
        <div class="inner two"></div>
        <div class="inner three"></div>
      </div>
      <div class="loading-word">
        <p class="loading-title" id="loading-title">dancehole的小破站~</p>
        <span id="loading-text">加载中</span>
      </div>
    </div>
  </div>
  <section id="section" class="section">
    <!-- 背景图片 -->
    <div class="bg-all">
      <img id="bg" onerror="this.classList.add('error');">
      <div class="cover"></div>
    </div>
    <!-- 鼠标指针 -->
    <div id="g-pointer-1"></div>
    <div id="g-pointer-2"></div>
    <!-- 主体内容 -->
    <main id="main" class="main">
      <div class="container" id="container">
        <div class="row" id="row">
          <div class="col left">
            <!--基本信息-->
            <div class="main-left">
              <!--Logo-->
              <div class="main-img">
                <img id="logo-img" src="....." alt="img">
                <div class="img-title">
                  <span class="img-title-big" id="logo-text-1">dancehole<br></span>
                  <span class="img-text" id="logo-text-2">四号的个人主页</span>
                </div>
              </div>
              <!--介绍信息-->
              <div class="message cards" id="switchmore">
                <div class="des" id="des">
                  <i class="fa-solid fa-quote-left"></i>
                  <div class="des-title"><span id="change">Hello&nbsp;World&nbsp;!</span><br /><span id="change1">一个建立于
                      21 世纪的小站，存活于互联网的边缘</span></div>
                  <i class="fa-solid fa-quote-right"></i>
                </div>
              </div>
              <!--社交链接-->
              <div class="social" id="social">
                <a href="https://dancehole.gitee.io/web-d/" class="link" id="my-home-page" style="margin-left: 4px" target="_blank" data-link-text="我的个人主页">
                  <i class="fa-solid fa-house"></i>
                </a>
                <!-- 只保留了个人主页链接，其余链接可以去set.js修改 -->
                <!-- <a href="https://github.com/wuhobin" class="link" id="github" style="margin-left: 4px" target="_blank">
                  <i class="fa-brands fa-github"></i>
                </a>
                <a href="https://wpa.qq.com/msgrd?v=3&uin=1289066006&site=qq&menu=yes" class="link" id="qq"
                  target="_blank">
                  <i class="fa-brands fa-qq"></i>
                </a>
                <a href="mailto:1289066006@qq.com" class="link" id="email">
                  <i class="fa-solid fa-envelope"></i>
                </a>
                <a href="https://space.bilibili.com/495003013" class="link" id="bilibili" target="_blank">
                  <i class="fa-brands fa-bilibili"></i>
                </a>
                <a href="https://www.facebook.com/" class="link" id="facebook" target="_blank">
                                <i class="fa-brands fa-facebook"></i>
                            </a> -->
                <!-- <a id="link-text">通过这里联系我</a> -->
              </div>
            </div>
          </div>
          <!--第二屏 Logo-->
          <div class="logo cards" style="display: none" id="changemore">
            <a class="logo-text" id="logo-text-small">wuhobin.top</a>
          </div>
          <div class="col right">
            <div class="main-right">
              <!--功能区-->
              <div class="row rightone" id="rightone">
                <div class="col hitokotos">
                  <!--一言-->
                  <div class="hitokoto cards" id="hitokoto">
                    <!--切换音乐-->
                    <div class="open-music fixed-top" id="open-music">
                      <i class="fa-solid fa-compact-disc"></i>
                      <span>&nbsp;打开音乐播放器</span>
                    </div>
                    <!--切换音乐结束-->
                    <div class="hitokoto-all">
                      <div class="hitokoto-text"><span id="hitokoto_text">每一个人都应该明确自己的方向和位置</span>
                      </div>
                      <div class="hitokoto-from">-「&nbsp;<span id="from_text">無名</span>&nbsp;」
                      </div>
                    </div>
                  </div>
                  <!--音乐-->
                  <div class="music" id="music">
                    <div class="music-all">
                      <div class="music-button">
                        <div id="music-open">音乐列表</div>
                        <div id="music-close">回到一言</div>
                      </div>
                      <div class="music-control">
                        <i class="fa-solid fa-backward-step" id="last"></i>
                        <div id="play">
                          <i class="fa-solid fa-play"></i>
                        </div>
                        <i class="fa-solid fa-forward-step" id="next"></i>
                      </div>
                      <div class="music-menu">
                        <div class="music-text">
                          <span id="music-name">未播放音乐</span>
                        </div>
                        <div class="music-volume" style="display: none;">
                          <div id="volume-ico">
                            <i class="fa-solid fa-volume-low"></i>
                          </div>
                          <input type="range" min="0" max="1" step="0.01" id="volume">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col times">
                  <!--时间-->
                  <div class="time cards" id="upWeather">
                    <div class="timeshow" id="time">
                      2000&nbsp;年&nbsp;0&nbsp;月&nbsp;00&nbsp;日&nbsp;<span class="weekday">星期一</span><br><span
                        class="time-text">00:00:00</span>
                    </div>
                    <div class="weather">
                      <span id="city_text">天气</span>&nbsp;
                      <span id="wea_text">加载失败</span>&nbsp;
                      <span id="tem_text"></span>
                      <span id="win_text">次数</span>
                      <span id="win_speed">超限</span>
                    </div>
                  </div>
                </div>
              </div>
              <!--分隔线-->
              <div class="line">
                <i class="fa-solid fa-link"></i>
                <span class="line-text">网站列表</span>
              </div>
              <!--网站链接 为了支持动态增加 移动至js实现-->
              <div class="link" id="web-link">
                
                <!--第一行-->
                <!-- <div class="row" >
                  <div class="col">
                    <a id="link-url-1" href="https://blog.bywind.xyz/" target="_blank">
                      <div class="link-card cards">
                        <i id="link-icon-1" class="fa-solid fa-blog"></i>
                        <span class="link-name" id="link-name-1">博客</span>
                      </div>
                    </a>
                  </div>
                  <div class="col 2">
                    <a id="link-url-2" href="https://tongji.baidu.com/" target="_blank">
                      <div class="link-card cards">
                        <i id="link-icon-2" class="fa-solid fa-cloud"></i>
                        <span class="link-name" id="link-name-2">统计</span>
                      </div>
                    </a>
                  </div>
                  <div class="col">
                    <a id="link-url-3" href="https://blog.bywind.xyz/music/" target="_blank">
                      <div class="link-card cards">
                        <i id="link-icon-3" class="fa-solid fa-music"></i>
                        <span class="link-name" id="link-name-3">音乐</span>
                      </div>
                    </a>
                  </div>
                </div> -->

                <!--第二行(可自行添加行 列)-->
                <!-- <div class="row" style="margin-top: 1.5rem;" id="web-row2">
                  <div class="col">
                    <a id="link-url-4" href="https://www.bywind.xyz/" target="_blank">
                      <div class="link-card cards">
                        <i id="link-icon-4" class="fa-solid fa-compass"></i>
                        <span class="link-name" id="link-name-4">起始页</span>
                      </div>
                    </a>
                  </div>
                  <div class="col 2">
                    <a id="link-url-5" href="https://blog.bywind.xyz/stars/" target="_blank">
                      <div class="link-card cards">
                        <i id="link-icon-5" class="fa-solid fa-book-bookmark"></i>
                        <span class="link-name" id="link-name-5">网址集</span>
                      </div>
                    </a>
                  </div>
                  <div class="col">
                    <a id="link-url-6" href="https://bywind.xyz/" target="_blank">
                      <div class="link-card cards">
                        <i id="link-icon-6" class="fa-solid fa-flask"></i>
                        <span class="link-name" id="link-name-6">实验室</span>
                      </div>
                    </a>
                  </div>
                </div> -->
                
              </div>
            </div>
          </div>
        </div>
        <!--展开菜单按钮-->
        <div class="menu" id="switchmenu">
          <a class="munu-button cards" id="menu">
            <i class="fa-solid fa-bars"></i>
          </a>
        </div>
        <!--更多内容-->
        <div class="more" id="more">
          <!--关闭按钮-->
          <div class="close fixed-top" id="close">
            <i class="fa-solid fa-circle-xmark"></i>
          </div>
          <!--时间胶囊-->
          <div class="line" style="margin-top: 1rem;">
            <i class="fa-solid fa-angle-left"></i>
            <span class="line-text">时间胶囊</span>
            <i class="fa-solid fa-angle-right"></i>
          </div>
          <div class="date" id="date">
            <div class="item" id="dayProgress">
              <div class="date-text" style="margin-top: 0rem;">今日已经度过了&nbsp;<span></span>&nbsp;小时
              </div>
              <div class="progress">
                <div class="progress-bar"></div>
              </div>
            </div>
            <div class="item" id="weekProgress">
              <div class="date-text">本周已经度过了&nbsp;<span></span>&nbsp;天</div>
              <div class="progress">
                <div class="progress-bar"></div>
              </div>
            </div>
            <div class="item" id="monthProgress">
              <div class="date-text">本月已经度过了&nbsp;<span></span>&nbsp;天</div>
              <div class="progress">
                <div class="progress-bar"></div>
              </div>
            </div>
            <div class="item" id="yearProgress">
              <div class="date-text">今年已经度过了&nbsp;<span></span>&nbsp;个月</div>
              <div class="progress">
                <div class="progress-bar"></div>
              </div>
            </div>
          </div>
          <!--杂七杂八 更多菜单-->
          <div class="line">
            <i class="fa-solid fa-angle-left"></i>
            <span class="line-text">杂七杂八</span>
            <i class="fa-solid fa-angle-right"></i>
          </div>
          <!--网站链接-->
          <div class="row">
            <div class="col">
              <a href="#" target="_blank">
                <div class="link-card cards">
                  <span class="link-name">站点监测</span>
                </div>
              </a>
            </div>
            <div class="col 2">
              <a href="https://blog.bywind.xyz/music/" target="_blank">
                <div class="link-card cards">
                  <span class="link-name">播放器</span>
                </div>
              </a>
            </div>
            <div class="col">
              <a href="#" target="_blank">
                <div class="link-card cards">
                  <span class="link-name">编辑器</span>
                </div>
              </a>
            </div>
          </div>
          <div class="row" style="margin-top: 1.5rem;">
            <div class="col">
              <a href="https://blog.bywind.xyz//gallery/" target="_blank">
                <div class="link-card cards">
                  <span class="link-name">时光相册</span>
                </div>
              </a>
            </div>
            <div class="col 2">
              <a href="#" target="_blank">
                <div class="link-card cards">
                  <span class="link-name">文件库</span>
                </div>
              </a>
            </div>
            <div class="col">
              <a id="openmore">
                <div class="link-card cards">
                  <span class="link-name">更多</span>
                </div>
              </a>
            </div>
          </div>
        </div>
        <!--更多页面-->
        <div class="box" id="box" style="display: none">
          <div class="box-wrapper">
            <!--关闭按钮-->
            <div class="closebox fixed-top" id="closemore">
              <i class="fa-solid fa-circle-xmark"></i>
            </div>
            <!--左侧内容-->
            <div class="box-left">
              <div class="img-title">
                <span class="img-title-big" id="logo-title-other">dancehole</span>
                <span class="img-text" id="logo-title-other-small">@sztu</span><br />
                <span class="img-text">&nbsp;v&nbsp;1.0</span>
                <a href="https://github.com/dancehole" target="_blank">
                  <i class="fa-brands fa-github"></i>
                </a>
              </div>
              <!--更多内容-->
              <div class="accordion" id="accordion">
                <div class="accordion-item">
                  <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                      data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                      壁纸设置
                    </button>
                  </h2>
                  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                    data-bs-parent="#accordion">
                    <div class="accordion-body">
                      <div class="set">
                        <div class="wallpaper" id="wallpaper">
                          <div class="form-radio">
                            <input type="radio" class="set-wallpaper" style="display: none;" id="radio1" value="1"
                              name="wallpaper-type">
                            <label for="radio1">默认壁纸</label>
                          </div>
                          <div class="form-radio">
                            <input type="radio" class="set-wallpaper" style="display: none;" id="radio2" value="2"
                              name="wallpaper-type">
                            <label for="radio2" id="wallpaper_text1">每日一图</label>
                          </div>
                          <div class="form-radio">
                            <input type="radio" class="set-wallpaper" style="display: none;" id="radio3" value="3"
                              name="wallpaper-type">
                            <label for="radio3" id="wallpaper_text2">随机风景</label>
                          </div>
                          <div class="form-radio">
                            <input type="radio" class="set-wallpaper" style="display: none;" id="radio4" value="4"
                              name="wallpaper-type">
                            <label for="radio4" id="wallpaper_text3">随机动漫</label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--更新日志-->
                <div class="accordion-item">
                  <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                      data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                      更新日志
                    </button>
                  </h2>
                  <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                    data-bs-parent="#accordion">
                    <div class="accordion-body">
                      <div class="upnote">
                        <span class="uptext" id="upnote-content">
                          2024-04-02&nbsp;&nbsp;<i class="fa-solid fa-circle-plus"></i>&nbsp;&nbsp;git拉取项目，作首次修改（个人主页）<br>
                          <!-- 其余内容改在js里添加 -->
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--Aplayer-->
            <div class="box-right">
              <div id="aplayer">
                <span>音乐播放器加载失败</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- 版权信息 -->
    <footer id="footer" class="fixed-bottom footer">
      <div class="power">
        <span id="power">
          <!-- 多余了 :Copyright&nbsp;&copy; -->
          <!-- <script>
            document.write((new Date()).getFullYear());
          </script> -->
          <a id="power-text">Aurora</a>
        </span>

        <!-- 站点备案 -->
        <a href="https://beian.miit.gov.cn" id="beian" target="_blank">&amp;&nbsp;鄂ICP备20006685号（示例）</a>
      </div>
      <!-- 歌词显示 -->
      <div id="lrc"></div>
    </footer>
  </section>
  <!-- sw.js 注册 Service Worker 实现诸如缓存资源、离线访问、推送通知等功能，以提高 Web 应用的性能和用户体验(本地部署会报错)-->
  <script>
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
        navigator.serviceWorker.register("sw.js");
      });
    }
  </script>
  <!-- noscript -->
  <noscript>
    <div class="noscript fixed-top">请开启 JavaScript</div>
  </noscript>
  <!-- JS -->
  <script type="text/javascript" src="./js/main.js"></script>
  <script type="text/javascript" src="./js/set.js"></script>
  <script type="text/javascript" src="./js/time.js"></script>
  <script type="text/javascript" src="./js/js.cookie.js"></script>
  <script type="text/javascript"
    src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/js/bootstrap.min.js">
    </script>
</body>

</html>